<style>
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 为每个信息项添加下边距 */
}

.label {
  font-weight: bold;
  margin-right: 10px; /* 标签和内容之间的间距 */
}

.info-item + .info-item {
  margin-top: 15px; /* 各信息项之间的间距 */
}

.section {
  margin: 20px 0;
}

.info-item {
  display: flex;
  flex-wrap: wrap;  /* 允许换行 */
}

.card {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin: 10px;  /* 每个卡片的间距 */
  flex: 1 1 22%; /* 每个卡片的基础占宽度（4个一行） */
  max-width: 22%; /* 最大宽度 */
}

.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(3),
.card:nth-child(4) {
  flex: 1 1 22%; /* 第一行 4个 */
}

.card:nth-child(5),
.card:nth-child(6),
.card:nth-child(7) {
  flex: 1 1 30%; /* 第二行 3个 */
}

.card:nth-child(8) {
  flex: 1 1 100%; /* 第三行 1个 */
}

.section {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 90%;
  height: 90%;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}

.card {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  margin-right: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.name-age {
  display: flex;
  align-items: center;
}

.name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 5px;
}

.age {
  font-size: 14px;
  color: #888;
}

.icon {
  margin-left: 5px;
  color: #00bfff;
}

.relation {
  font-size: 14px;
  color: #555;
}

.button-group {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  gap: 10px; /* 按钮之间的间距 */
  background-color: #fff; /* 背景颜色为白色 */
  padding: 10px; /* 内间距 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  height: 90%;
}
.header {
  border-bottom: 1px solid gray;
  margin-bottom: 20px;
}
.section {
  margin-bottom: 20px;
}
.info-item {
  display: flex; /* 使用弹性布局 */
  margin: 5px 0;
  padding: 10px 0;
  align-items: center; /* 垂直对齐 */
}
.label {
  font-weight: bold;
  margin-right: 10px;
}
.align-left {
  text-align: left;
}
.card {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.info {
  display: flex;
  flex-direction: column;
}
.name-age {
  display: flex;
  align-items: center;
}
.name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 5px;
}
.age {
  font-size: 14px;
  color: #888;
}
.icon {
  margin-left: 5px;
  color: #00bfff;
}
.relation {
  margin-top: 5px;
  font-size: 14px;
  color: #555;
}
.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.form-item {
  display: flex;
  align-items: center;
}
.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}

.contract-details {
  padding: 20px;
  background-color: #fff;
}
.contract-details {
  padding: 20px;
  background-color: #fff;
}
.form-row {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  margin-bottom: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1 0 30%; /* 每个表单项宽度为30% */
  margin-right: 20px; /* 右侧间距 */
  margin-bottom: 10px; /* 下侧间距 */
}
.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}
.contract-details {
  padding: 20px;
  background-color: #fff;
}
.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.form-item {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20px;
}
.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}
.el-date-picker,
.el-input {
  width: 200px;
}
.full-width .el-input {
  width: 100%;
}
.form-item:nth-child(3n) {
  margin-right: 0; /* 每3个一行，最后一个不需要右边距 */
}

.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}

/* 具体选择器调整 */
.full-width .el-input {
  width: 100%;
}
.contract-details {
  padding: 20px;
  background-color: #fff;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.full-width .el-input {
  width: 100%;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
}

textarea {
  width: 100%;
  resize: none;
}

</style>

<template>
  <div class="container">
    <div class="header">
      <h1 class="align-left"><a
          style="border-left: 4px solid blue;margin-left: 30px;padding-left: 10px;">编辑签约信息</a></h1>
    </div>
    <div class="section">
      <h3 class="align-left"><a style="margin-left: 20px;">居民信息</a></h3>
      <div class="contract-details">
        <div class="form-row">
          <span class="label">姓名：<a style="color: lightskyblue">{{ form.name }}</a></span> &nbsp;
          <span class="label">身份证号：{{ form.sfz }}</span> &nbsp;
          <span class="label">性别：{{ form.sex == 1 ? '男' : '女' }}</span> &nbsp;
          <span class="label">年龄：{{ form.age }}</span> &nbsp;
        </div>
      </div>
      <div class="contract-details">
        <div class="form-row">
          <span class="label">联系电话：<a style="color: lightskyblue">{{ form.phone }}</a></span> &nbsp;
          <span class="label">地址：{{ form.dizhi }}</span> &nbsp;
<!--            //下拉诓形式的多选框-->
            <span class="label">标签：
              <el-form>
              <el-form-item>
               <el-select v-model="selectedTags" multiple placeholder="请选择服务包标签">
<!--                   <el-option label="全选" value="全选"></el-option>-->
                   <el-option label="慢病护理" value="慢病护理"></el-option>
                   <el-option label="高血压" value="高血压"></el-option>
                   <el-option label="高血糖" value="高血糖"></el-option>
                   <el-option label="糖尿病" value="糖尿病"></el-option>
                   <el-option label="脑卒中" value="脑卒中"></el-option>
                   <el-option label="嘉辉病" value="嘉辉病"></el-option>
                   <el-option label="玉玉症" value="玉玉症"></el-option>
                   <el-option label="抑郁症" value="抑郁症"></el-option>
                   <el-option label="脑梗" value="脑梗"></el-option>
                   <el-option label="风湿" value="风湿"></el-option>
                   <el-option label="新冠" value="新冠"></el-option>
                   <el-option label="新冠" value="新冠"></el-option>
                 </el-select>
                </el-form-item></el-form>
          </span>


        </div>
      </div>
      <div class="info-item">家庭成员
        <div class="card">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div class="info">
            <div class="name-age">
              <span class="name">{{ form.cname }}</span>
              <span class="age">{{ form.cage }}岁</span>
              <span class="icon">🌟</span>
            </div>
            <div class="relation">关系：{{ form.gx }}</div>
          </div>
        </div>
      </div>
      <div class="contract-details">
        <h3 class="align-left">签约信息</h3>
        <div class="form-row">

          <div class="form-item">
            <span class="label">签约编号：</span>
            <span>{{ form.bianhao }}</span>
          </div>
          <div class="form-item">
            <span class="label">签约状态：</span>
            {{
              form.status == 1 ? '待审核' : form.status == 2 ? '待支付' : form.status == 3 ? '已驳回' : form.status == 4 ? '生效中' : '已取消'
            }}
          </div>
          <div class="form-item">
            <span class="label">签约机构：</span>
            <el-select v-model="form.jid" placeholder="请选择">
              <el-option v-for="item in jiGo" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="form-row top-row">
          <div class="form-item">
            <span class="label">签约团队：</span>
            <el-select v-model="form.tid" placeholder="请选择">
              <el-option v-for="item in tuanDui" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="form-item">
            <span class="label">签约医生：</span>
            <el-select v-model="form.yid" placeholder="请选择">
              <el-option v-for="item in ys" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="form-item">
            <span class="label">服务包：</span>
            <el-select v-model="form.fid" placeholder="请选择">
              <el-option v-for="item in fwb" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="contract-details">
        <div class="form-row">
          <div class="form-item">
            <span class="label">签约类型：</span>
            <span>{{ form.lx }}</span>
          </div>
          <div class="form-item">
            <span class="label">签约周期：</span>
            <span>{{ form.zhoqi }}</span>
          </div>
          <div class="form-item">
            <span class="label">费用：</span>
            <span>￥{{ form.feiyon }}</span>
          </div>
        </div>
        <div class="form-row">
          <div class="form-item">
            <span class="label">申请时间：</span>
            <span>{{ form.sqsj }}</span>
          </div>
          <div class="form-item">
            <span class="label">生效日期：</span>
            <el-date-picker v-model="form.sxdate" placeholder="请选择"></el-date-picker>
          </div>
        </div>
        <div class="form-row">
          <div class="form-item full-width">
            <span class="label">签约备注：</span>
            <el-input type="textarea" v-model="form.bz" placeholder="请输入签约备注"></el-input>
          </div>
        </div>
      </div>
      <div class="button-group">
<!--        <el-button v-if="form.status !=3 && form.status !=4 && form.status !=5" type="primary">编辑签约信息</el-button>-->
<!--        <el-button v-if="form.status !=3 && form.status !=1 && form.status !=5 && form.status !=4" type="primary">提醒支付</el-button>-->
<!--        <el-button v-if="form.status !=2 && form.status !=3 && form.status !=5 && form.status !=4" type="success" @click="update()">审核通过</el-button>-->
<!--        <el-button v-if="form.status !=2 && form.status !=3 && form.status !=5 && form.status !=4" type="danger">驳回</el-button>-->
<!--        <el-button v-if="form.status !=2 && form.status !=3 && form.status !=1" type="warning">续约</el-button>-->
        <el-button @click="update()">保存</el-button>
        <el-button @click="fanhui()">返回</el-button>
      </div>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      jiGo: [],
      tuanDui: [],
      fwb: [],
      ys: [],
      selectedTags: [],
      jiating:[],
      dialogVisible: false,
      formInline: {},
    }
  },
  methods: {
    add(){
      this.dialogVisible = true;
    },
    Jiating(){
      this.axios.post(`http://localhost:9000/agency/jiating/findAll`).then(res=>{
        this.jiating = res.data.data;
      })
    },
    findById() {
      const id = this.$route.query.id; // 获取浏览器地址栏传递过来的id
      this.axios.get(`http://localhost:9000/agency/qianyue/findById?id=${id}`).then(res => {
        this.form = res.data.data;
        this.form.sxdate=null;
        this.form.fid=null;
      });
    },
    update() {
      this.form.biaoqian=this.selectedTags.join(",");
      this.axios.post(`http://localhost:9000/agency/qianyue/update`, this.form).then(res => {
        this.$message.success('修改成功');
        this.$router.push('/qy');
      });
    },
    fanhui() {
      const status = this.form.status; // 假设状态存储在 this.status 中
      let path = '/qy';

      if (status === 4 || status === 5) {
        path = '/jl';
      }

      this.$router.push(path);
    },
    findJiGo() {
      this.axios.post(`http://localhost:9000/agency/jigo/findAll`).then(res => {
        this.jiGo = res.data.data;
        //回显当前机构
        const currentJigo = this.jiGo.find(option => option.label === this.form.jigo);
        if (currentJigo) {
          this.form.jigo = currentJigo.value; // 确保默认回显当前值
        }
      })
    },
    findTuanDui() {
      this.axios.post(`http://localhost:9000/agency/tuandui/findAll`).then(res => {
        this.tuanDui = res.data.data;
        //回显当前机构
        const currenttuanDui = this.tuanDui.find(option => option.label === this.form.jigo);
        if (currenttuanDui) {
          this.form.tuanDui = currenttuanDui.value; // 确保默认回显当前值
        }
      })
    },
    findFwb() {
      this.axios.post(`http://localhost:9000/agency/fwb/findAll`).then(res => {
        this.fwb = res.data.data;
        //回显当前机构
        const currentfwb = this.fwb.find(option => option.label === this.form.jigo);
        if (currentfwb) {
          this.form.fwb = currentfwb.value; // 确保默认回显当前值
        }
      })
    },
    findYs() {
      this.axios.post(`http://localhost:9000/agency/yisheng/findAll`).then(res => {
        this.ys = res.data.data;
        //回显当前机构
        const currentys = this.ys.find(option => option.label === this.form.jigo);
        if (currentys) {
          this.form.ys = currentys.value; // 确保默认回显当前值
        }
      })
    }
  },
  created() {
    if (this.$route.query.id!=null) {
      this.findById();

    }else{

    }
    this.findJiGo();
    this.findTuanDui();
    this.findFwb();
    this.findYs();
    this.Jiating();
  }
}
</script>